import styled from 'styled-components'
import React, { useState } from 'react'
import type { FC, ReactNode } from 'react'
import MonacoEditor from 'react-monaco-editor'

import { useMyDispatch } from '../../store'
import { setCodeContent } from '../../store/modules/success'
import { setCodeChange } from '../../store/modules/codeall'

import './index.scss'
// 定义 Wrap 组件
const Wrap = styled.div`
  position: absolute;
  width: 1060px;
  height: 415px;
  margin: 0 auto;
  top: -12px;
  left: 0;
`

interface IProps {
  children?: ReactNode
  code?: string
}
const CodeEditor: FC<IProps> = ({ code }) => {
  const [editorValue, seteditorValue] = useState(code)
  const dispatch = useMyDispatch()
  const onChange = (v: string) => {
    seteditorValue(v)
    dispatch(setCodeContent(v))
    dispatch(setCodeChange(true))
  }
  return (
    <Wrap>
      <MonacoEditor
        width="100%"
        language="javascript"
        value={editorValue}
        onChange={(v) => onChange(v)}
        theme="vs-dark"
      />
    </Wrap>
  )
}

export default CodeEditor
